<template>
  <div id="HomePage">
    <vue-particles
        class="login-bg"
        color="#39AFFD"
        :particleOpacity="0.7"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#8DD1FE"
        :linesWidth="1"
        :lineLinked="false"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"

    ></vue-particles>
    <div>
      <el-button class="top" @click="toTop" icon="el-icon-top" circle></el-button>
    </div>
    <el-container>
        <el-main>
          <div class="animate__animated animate__zoomInDown" style="font-family: my_title,serif;font-size: 60px; " >
            EXCHANGE YOUR IDEAS
          </div>
        </el-main>
      </el-container >
    <div style=" width: 80%;margin: 0 auto;">
      <el-row style="height: 80%">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="关注" name="first" >
            <span v-if=!this.$store.state.isLogin>
              <el-link style="font-size: 25px" type="primary" href="/login">请先登录！</el-link>
            </span>

            <span v-if=this.$store.state.isLogin>
              <div v-if=this.have>没有关注的人哦，请关注了作者之后再来查看吧</div>
              <el-card shadow="hover" v-for="(item) in Followed" style="margin: 50px;" >
              <el-link style="font-size: 25px" type="primary" @click.native="toArticle(item.id)">{{item.title}}</el-link>
              <div>{{item.authorName}}</div>
              <div style="text-align: right">{{item.createTime}}</div>
            </el-card>
            </span>

          </el-tab-pane>
          <el-tab-pane label="推荐" name="second">

            <el-card shadow="hover" v-for="(item) in Recommended" style="margin: 50px">
              <el-link style="font-size: 25px" type="primary" @click.native="toArticle(item.id)">{{ item.title }}
              </el-link>
              <div>{{ item.authorName }}</div>
              <div style="text-align: right">{{ item.createTime }}</div>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="分类" name="third">
            <el-container>
              <el-aside width="15%">
                <span v-for="(item) in label">
                  <el-button style="margin: 5px" @click="change(item)">{{ item }}</el-button>
                  <br/>
                </span>

              </el-aside>
              <div>
                <el-card shadow="hover" v-for="(item) in labelResult" style="margin: 50px;width: 900px">
                  <el-link style="font-size: 25px" type="primary" @click.native="toArticle(item.id)">{{ item.title }}
                  </el-link>
                  <div>{{ item.authorName }}</div>
                  <div style="text-align: right">{{ item.createTime }}</div>
                </el-card>
              </div>
            </el-container>

          </el-tab-pane>
        </el-tabs>

      </el-row>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import user from "@/store/user";
export default {
  name: "HomePage",
  data() {
    return {
      Recommended: [],
      Followed: [],
      label: [],
      labelResult: [],
      activeName: 'second',
      have: false
    };
  },
  created(){
    this.getFollowedInfo();
    this.getRecommendedInfo();
    this.getLabel();
  },
  methods: {
    toTop() {
      document.documentElement.scrollTop = 0;
    },
    change(keyword) {
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/article/searchByLabel',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({
          keyword: keyword
        })
      })
          .then(res => {              /* res 是 response 的缩写 */
            this.labelResult = res.data.data
            if (this.labelResult.length === 0)
              this.labelHave = true;
            for (let i in this.labelResult) {
              this.labelResult[i].createTime = this.labelResult[i].createTime.replace(/T/g, " ")
              this.labelResult[i].createTime = this.labelResult[i].createTime.replace(/.000\+00:00/g, "")
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    getLabel() {
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/article/showLabels',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
        })
      })
          .then(res => {              /* res 是 response 的缩写 */
            this.label = res.data.data;
            this.getFirst();
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    getFirst(){
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/article/searchByLabel',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({
          keyword: this.label[0]
        })
      })
          .then(res => {              /* res 是 response 的缩写 */
            this.labelResult = res.data.data
            if (this.labelResult.length === 0)
              this.labelHave = true;
            for (let i in this.labelResult) {
              this.labelResult[i].createTime = this.labelResult[i].createTime.replace(/T/g, " ")
              this.labelResult[i].createTime = this.labelResult[i].createTime.replace(/.000\+00:00/g, "")
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getFollowedInfo() {
      const userInfo = user.getters.getUser(user.state());
      var userid;
      if (userInfo === null) userid = null;
      else userid = userInfo.user.userID;
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/article/layout',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data:({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          userID:userid,
          recommend:0
        })
      })
          .then(res => {              /* res 是 response 的缩写 */
            this.Followed = res.data.data

            var x = 0
            for (let i in this.Followed) {
              this.Followed[i].createTime = this.Followed[i].createTime.replace(/T/g, " ")
              this.Followed[i].createTime = this.Followed[i].createTime.replace(/.000\+00:00/g, "")
              x = x + 1;
            }
            if (x === 0)
              this.have = true
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    getRecommendedInfo(){
      const userInfo = user.getters.getUser(user.state());
      var userid;
      if(userInfo===null) userid=null;
      else userid=userInfo.user.userID;
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/article/layout',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          userID:userid,
          recommend:1
        })
      })
          .then(res => {/* res 是 response 的缩写 */
            this.Recommended=res.data.data
            for(let i in this.Recommended){
              this.Recommended[i].createTime=this.Recommended[i].createTime.replace(/T/g," ")
              this.Recommended[i].createTime=this.Recommended[i].createTime.replace(/.000\+00:00/g,"")
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    toArticle(id){
      this.$router.push({path: '/text', query: {passageID: id}})
    }
  }
}
</script>

<style scoped>
@import "../assets/font/font.css";


.login-bg {
  width: 95%;
  height: 300%;

}

#particles-js {
  position: absolute;
}

.top {
  position: fixed;
  bottom: 50px;
  right: 100px;
}
</style>
